<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline='true'>
				<el-form-item>
					<el-input v-model="name" placeholder="订单编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getOrders">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="orders" highlight-current-row v-loading="listLoading" element-loading-text="拼命加载中" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="130" sortable>
			</el-table-column>
			<el-table-column prop="userId" label="会员账户" width="150" sortable>
			</el-table-column>
			<el-table-column prop="payment" label="实付金额" width="130" sortable>
			</el-table-column>
      <el-table-column prop="postage" label="运费" width="130" sortable>
			</el-table-column>
      <el-table-column prop="paymentType" label="支付方式" :formatter="formatType" width="140" sortable>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="140" :formatter="formatStatus" sortable>
			</el-table-column>
      <el-table-column prop="paymentTime" label="付款时间" width="200" :formatter="dateFormat" sortable>
      </el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="pagination.pageSize" :total="pagination.total" style="float:left;">
			</el-pagination>
		</el-col>
  </section>
</template>
<script>
	import { instance, getOrderList } from '../../api';
  let moment = require("moment"); // 直接在所需要的组件中引入

	export default {
		data() {
			return {
				orders: [],
				name: '',
				edit: true,
				readonly: true,
				pagination: {
					total: 0,
					pageNum: 1,
					pageSize: 20,
				},
				listLoading: false,
				sels: [],//列表选中列
      }
    },
		methods: {
			//状态显示转换
			formatStatus: function (row, column) {
				return row.status == 10 ? '未付款' : row.status == 20 ? '已付款' : row.status == 40 ? '已发货' : row.status == 50 ? '交易成功' : row.status == 60 ? '交易关闭' :'未知';
			},
      formatType: function (row, column) {
        return row.paymentType == 1 ? '在线支付' : '现金支付';
      },
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "未付款";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
			handleCurrentChange(currentPage) {
				this.pagination.pageNum = currentPage;
				this.getOrders();
			},
			//获取api列表
			getOrders() {
				let params = {
					currentPage: this.pagination.pageNum,
					pageSize: this.pagination.pageSize
				};
				console.log(params);
				this.listLoading = true;
				//NProgress.start();
				getOrderList(params).then((res) => {
					this.pagination.total = res.data.data.orders.total;
					this.orders = res.data.data.orders.list;
					this.listLoading = false;
					//NProgress.done();
				});
			},

			selsChange: function (sels) {
				this.sels = sels;
			}
		},
		mounted() {
			this.getOrders();
		}
	}

</script>

<style scoped>

</style>
